<template>
	<view class="flexWork">
		<view class="workList">
			<view class="workOne"  v-for="(item, index) in workListOne" :key="index+'one'" @click="index === 0 ? goPendingTask() : goInspectTask()">
				<view class="workValue" v-if="item.type == 'single'">{{item.value}}</view>
				<view class="workValue" v-if="item.type == 'multi'">{{item.value}}/{{item.total}}</view>
				<view class="workTitle">{{item.title}}</view>
			</view>
		</view>
		<view class="workList">
			<view class="workTwo" v-for="(item, index) in workListTwo" :key="index+'two'" @click="goInspectTask">
				<text class="workTitle">
					{{item.title}}：
				</text>
				<text v-if="item.type == 'single'" class="workValue">
					{{item.value}}
				</text>
				<text v-if="item.type == 'multi'" class="workValue">
					{{item.value}}/{{item.total}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMyTask } from '@/api/business/inspect.js'
	import { utilities } from '@/utils/common.js'
	
	export default {
		props: {
			taskCount: {
				type: String,
				default() {
					return ""
				}
			}
		},
		data() {
			return {
				workListOne: [{
					title: this.$t('app.homepage.auditBacklog'),
					value: this.taskCount ? this.taskCount : 0,
					type: 'single'
				}],
				workListTwo: []
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				// 获取工作统计
				let params = {
					startDate: utilities.getNowDate(),
					userId: uni.getStorageSync("userId")
				}
				getMyTask(params).then(res=>{
					this.workListOne.push({
						title: this.$t('inspection.taskPlan.toCheckTasks'),
						value: res.data.waitTask ? res.data.waitTask : "0",
						type: 'single'
					})
					this.workListTwo.push({
						title: this.$t('inspection.taskPlan.inProgressTasks'),
						value: res.data.implementTask ? res.data.implementTask : "0",
						type: 'single'
					})
					this.workListTwo.push({
						title: this.$t('inspection.taskPlan.inspEquipment'),
						value: res.data.equipComplNumber ? res.data.equipComplNumber : "0",
						total: res.data.equipTotalNumber ? res.data.equipTotalNumber : "0",
						type: 'multi'
					})
					this.workListTwo.push({
						title: this.$t('inspection.line.inspection'),
						value: res.data.inspComplNumber ? res.data.inspComplNumber : "0",
						total: res.data.inspTotalNumber ? res.data.inspTotalNumber : "0",
						type: 'multi'
					})
				})
			},
			goPendingTask() {
				uni.navigateTo({
					url: '/pages/base/flow/index'
				})
			},
			goInspectTask() {
				uni.navigateTo({
					url: '/pages/business/inspect/inspectList'
				})
			}
		}
	}
</script>

<style lang="scss">
	.flexWork {
		margin: 5px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	
	.workList {
		line-height: 30px;
		display: flex;
		justify-content: space-between;
		width: 100%;
	}
	
	.workOne {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		
		.workValue {
			color: #1E91E6;
			font-weight: 800;
			font-size: 26px;
		}
		
		.workTitle {
			color: #999;
			font-size: 14px;
		}
	}
	
	.workTwo {
		display: flex;
		align-items: center;
		// flex: 1;
		// justify-content: space-around;
		
		.workValue {
			color: #1E91E6;
			font-weight: 800;
			font-size: 14px;
		}
		
		.workTitle {
			color: #999;
			font-size: 14px;
		}
	}
</style>
